<template>
  <div class="demo-container">
    <h1>FlowChart 组件演示</h1>

    <div class="demo-content">
      <FlowChart
        :flow-data="flowData"
        :node-types="nodeTypes"
        :readonly="readonly"
        @node-click="onNodeClick"
        @node-select="onNodeSelect"
        @flow-change="onFlowChange"
        @edge-delete="onEdgeDelete"
        @node-delete="onNodeDelete"
      />
    </div>

    <div class="controls">
      <el-button @click="readonly = !readonly">
        {{ readonly ? '启用编辑' : '只读模式' }}
      </el-button>
      <el-button @click="clearFlow">清空画布</el-button>
      <el-button @click="loadSampleData">加载示例数据</el-button>
      <el-button @click="exportData">导出数据</el-button>
    </div>

    <div class="info-panel">
      <h3>当前流程数据：</h3>
      <pre>{{ JSON.stringify(flowData, null, 2) }}</pre>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from 'vue'
import FlowChart from './huaxian/FlowChart.vue'
import type { FlowData, UINode, UIEdge } from './huaxian/FlowChart.vue'
import { ElMessage } from 'element-plus'

const readonly = ref(false)

const nodeTypes = [
  { type: 1, label: '开始节点', color: '#52c41a' },
  { type: 2, label: '操作节点', color: '#1677ff' },
  { type: 3, label: '结束节点', color: '#f5222d' },
  { type: 4, label: '判断节点', color: '#faad14' },
  { type: 5, label: '元素节点', color: '#faad14' },
]

const flowData = ref<FlowData>({
  nodes: [],
  edges: [],
})

const onNodeClick = (node: UINode) => {
  console.log('节点点击:', node)
  ElMessage.info(`点击了节点: ${node.label}`)
}

const onNodeSelect = (node: UINode | null) => {
  console.log('节点选择:', node)
  if (node) {
    ElMessage.success(`选中了节点: ${node.label}`)
  }
}

const onFlowChange = (data: FlowData) => {
  flowData.value = data
  console.log('流程变化:', data)
}

const onEdgeDelete = (edge: UIEdge) => {
  console.log('连线删除:', edge)
  ElMessage.warning('连线已删除')
}

const onNodeDelete = (node: UINode) => {
  console.log('节点删除:', node)
  ElMessage.warning(`节点 ${node.label} 已删除`)
}

const clearFlow = () => {
  flowData.value = { nodes: [], edges: [] }
  ElMessage.success('画布已清空')
}

const exportData = () => {
  const dataStr = JSON.stringify(flowData.value, null, 2)
  navigator.clipboard.writeText(dataStr).then(() => {
    ElMessage.success('数据已复制到剪贴板')
  })
}

const loadSampleData = () => {
  flowData.value = {
    nodes: [
      {
        id: 'start-1',
        position: { x: 100, y: 100 },
        type: 1,
        label: '开始',
        description: '流程开始节点',
        config: { autoStart: true },
      },
      {
        id: 'action-1',
        position: { x: 300, y: 200 },
        type: 2,
        label: '用户登录',
        description: '用户登录验证',
        config: { timeout: 30000, retryCount: 3 },
      },
      {
        id: 'decision-1',
        position: { x: 500, y: 300 },
        type: 4,
        label: '年龄判断',
        description: '判断用户年龄是否满18岁',
        config: {
          expression: 'user.age >= 18',
          trueLabel: '成年',
          falseLabel: '未成年',
        },
      },
      {
        id: 'adult-1',
        position: { x: 700, y: 200 },
        type: 2,
        label: '成年用户处理',
        description: '处理成年用户逻辑',
        config: { allowFullAccess: true },
      },
      {
        id: 'minor-1',
        position: { x: 700, y: 400 },
        type: 2,
        label: '未成年用户处理',
        description: '处理未成年用户逻辑',
        config: { restrictedAccess: true },
      },
      {
        id: 'end-success',
        position: { x: 900, y: 200 },
        type: 3,
        label: '成功结束',
        description: '流程成功结束',
        config: { cleanup: true },
      },
      {
        id: 'end-restricted',
        position: { x: 900, y: 400 },
        type: 3,
        label: '受限结束',
        description: '受限访问结束',
        config: { cleanup: true },
      },
    ],
    edges: [
      {
        id: 'e-1',
        source: { node_id: 'start-1', position: 'bottom' },
        target: { node_id: 'action-1', position: 'top' },
      },
      {
        id: 'e-2',
        source: { node_id: 'action-1', position: 'bottom' },
        target: { node_id: 'decision-1', position: 'top' },
      },
      {
        id: 'e-3',
        source: { node_id: 'decision-1', position: 'right' },
        target: { node_id: 'adult-1', position: 'top' },
        condition: '成年',
        conditionType: 'true',
      },
      {
        id: 'e-4',
        source: { node_id: 'decision-1', position: 'left' },
        target: { node_id: 'minor-1', position: 'top' },
        condition: '未成年',
        conditionType: 'false',
      },
      {
        id: 'e-5',
        source: { node_id: 'adult-1', position: 'bottom' },
        target: { node_id: 'end-success', position: 'top' },
      },
      {
        id: 'e-6',
        source: { node_id: 'minor-1', position: 'bottom' },
        target: { node_id: 'end-restricted', position: 'top' },
      },
    ],
  }
  ElMessage.success('示例数据已加载')
}
</script>
  
  <style scoped>
.demo-container {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.demo-content {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.info-panel {
  max-height: 200px;
  overflow: auto;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

.info-panel pre {
  margin: 0;
  font-size: 12px;
}
</style>